import React, {useEffect, useState} from 'react';
import {Table} from 'antd';
import type {TableProps} from 'antd';
import {TableIDataType} from "./data";

interface IProps {
    data: TableIDataType[];

}

const ChangeTable: React.FC<IProps> = (props: IProps) => {
    const [sortedData, setSortedData] = useState<TableIDataType[]>([]);


    const columns: TableProps<TableIDataType>['columns'] = [
        {
            title: '创建时间',
            dataIndex: 'createTime',
            align: 'center',
            className: 'blue_table',

        },
        {
            title: '现场人员编号',
            dataIndex: 'customerNo',
            align: 'center',
            className: 'blue_table',

        },
        {
            title: '库位号',
            dataIndex: 'WarehouseNo',
            align: 'center',
            className: 'blue_table',

        },
        {
            title: '剩余数量',
            dataIndex: 'VariableQuantity',
            align: 'center',
            className: 'blue_table',

        }
    ];
    useEffect(() => {
        // 复制props.data并根据createTime排序
        const sortedArray = [...props.data].sort((a, b) => {
            return new Date(a.createTime).getTime() - new Date(b.createTime).getTime();
        });
        // 更新sortedData状态
        setSortedData(sortedArray);
    }, [props.data]);

    return (
        <div
            style={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                flexDirection: 'column',
                width: '100%',
                padding: 10,
            }}>
            <Table
                <TableIDataType>
                bordered
                scroll={{x: 150, y: 440}}
                tableLayout={'fixed'}
                size="small"
                columns={columns}
                dataSource={sortedData}
                pagination={
                    {position: ['none'], pageSize: 500, current: 1}
                }
                rowKey="createTime"/>
        </div>
    );
};

export default ChangeTable;